<template>
	<div class="main">
		<div class="ov-h">
			<div class="title">开奖</div>
		</div>
		<div class="draw-list">
			<router-link class="draw-item dis-flex"  v-for="item in drawList" :to="'/drawdetail/'+item.id">
				<div class="icon">
					<img src="@/assets/yl_img2.png" class="ver-mid" />
				</div>
				<div class="flex-1 draw-content">
					<div class="draw-number">
						<span class="ft-28 ft-b">{{item.type}}</span>
						<span class="ft-24 ml-28">第{{item.number}}期</span>
					</div>
					<div class="draw-result">
						<div class="result-item" v-for="item1 in item.winNumberList">{{item1}}</div>
					</div>
				</div>
				<div class="arrow"></div>
			</router-link>
			<!-- <router-link class="draw-item dis-flex" to="/index/drawdetail">
				<div class="icon">
					<img src="@/assets/yl_img2.png" class="ver-mid" />
				</div>
				<div class="flex-1 draw-content">
					<div class="draw-number">
						<span class="ft-28 ft-b">分分猜</span>
						<span class="ft-24 ml-28">第20180528091期</span>
					</div>
					<div class="draw-result">
						<div class="result-item">6</div>
						<div class="result-item">0</div>
						<div class="result-item">3</div>
						<div class="result-item">1</div>
						<div class="result-item">9</div>
					</div>
				</div>
				<div class="arrow"></div>
			</router-link> -->
		</div>
	</div>
</template>
<script>
	import {getDrawList} from '@/api/draw';
	export default {
		data(){
			return {
				drawList:[]
			}
		},
		mounted(){
			this.getDrawList();
		},
		methods:{
			getDrawList(){
				getDrawList().then(res=>{
					if (res.code==1) {
						res.data.forEach(item=>{
							item.winNumberList=item.winNumber.split('');
						})
						this.drawList=res.data;
					}
				})
			}
		}
	}

</script>
<style scoped lang="scss">
	@import '@/css/base.scss';
	.main{background-color:#F9F9F9;color: #5D5174;}
	.main a{color: #5D5174}
	.title{margin: 16px 40px 12px;font-size: 44px;color: #5D5174;}

	.draw-item{margin: 40px 30px;padding: 36px;background: #FFF;box-shadow: 0 8px 24px 0 rgba(237,237,237,0.50);border-radius: 14px;}
	.icon img{width: 120px;height: 116px;}
	.draw-content{margin-left: 46px;}
	.draw-result{margin-top: 6px;}
	.result-item{width: 60px;height: 60px;margin-right:10px;display: inline-block;border-radius: 50%;text-align: center;line-height: 60px;background: $red;color:#FFF;}
	.arrow{width: 16px;height: 16px;border-right: 4px solid #c4c7cb;border-bottom: 4px solid #c4c7cb;align-self: center;transform: rotateZ(-45deg);}
</style>